<template>
  <div class="leiyao_header">
    <header class="header">
      <!-- 顶部导航条 -->
      <div class="header-top">
        <div class="leiyao_container">
          <div class="city header-item">
            <span>全国</span>
            <span class="change_city">[切换]</span>
          </div>
          <div class="header-item">
            <a href="#">婚礼纪</a>
            <a href="#">婚宴请柬</a>
            <a href="#">婚宴酒店</a>
            <a href="#">结婚商城</a>
            <a href="#">婚品</a>
            <a href="#">新娘说</a>
            <a href="#">结婚攻略</a>
            <a href="#">结婚问答</a>
            <a href="#">美图</a>
            <a href="#">视频</a>
          </div>
        </div>
      </div>
      <!-- 顶部导航条结束 -->
      <!-- 搜索栏 -->
      <div class="leiyao_search leiyao_container">
        <div class="hotel_logo" @click="goIndex">
          <img src="../../../public/img/leiyao/logo.png" alt="" />
        </div>
        <div class="leiyao_search-from">
          <input type="text" placeholder="搜索酒店,搜索空格重置" v-model="val"/>
          <button @click="queryHotel(val)">搜索</button>
        </div>
        <div class="tel">
          <p>婚礼纪客服热线</p>
          <h3>400-1599090</h3>
        </div>
      </div>
    </header>
  </div>
</template>
<script>
export default {
  data(){
    return{
      val:'',


    }
  },
  methods:{
    queryHotel(val){
      if(val){
      this.axios.get(`/queryHotel?name=${val}`).then(res => {
        // 将传回的参传回父组件
        this.$emit('searchData',res.data.results)
      })
      }
    },
    goIndex(){
      this.$router.push('./')
    }
  }
}
</script>
<style scoped>

/* 来自APP.vue */
* {
  /* 禁止复制  */
  /* user-select:none; */
  caret-color: #333;
}
.leiyao_container {
  width: 1200px;
  margin: 0 auto;
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
a {
  text-decoration: none;
  outline: none;
}
ul li {
  list-style: none;
}
.btn {
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  border: 1px solid transparent;
  outline: none;
}
.btn-primary {
  background-color: #f83244;
  color: #fff;
}
.a_hover {
  color: #333;
}
.a_hover:hover {
  color: #f83244;
}

/* 头部导航条 */
.leiyao_header .header-top {
  height: 36px;
  background-color: #f4f4f3;
  border-bottom: 1px solid #ccc;
}
.leiyao_header .header-item {
  float: left;
  font-size: 12px;
  color: #666;
  text-decoration: none;
  line-height: 36px;
  margin-right: 30px;
}
.leiyao_header .header-item a {
  color: #666;
  text-decoration: none;
  margin-right: 30px;
}
.leiyao_header .header-item > .change_city {
  color: #f83244;
  cursor: pointer;
}

/* leiyao_search */
.leiyao_header .leiyao_search {
  width: 1200px;
  height: 112px;
  
}
.leiyao_header .leiyao_search div {
  float: left;
}
.leiyao_header .hotel_logo {
  width: 310px;
}
.leiyao_header .hotel_logo > img {
  width: 92px;
  cursor: pointer;
  padding-top: 34px;
}
.leiyao_header .leiyao_search-from {
  padding-top: 30px;
  font-size: 0;
}
.leiyao_header .leiyao_search-from > input {
  width: 464px;
  height: 40px;
  border: 1px solid #f83244;
  border-radius: 4px 0px 0px 4px;
  float: left;
  box-sizing: border-box;
  padding-left: 10px;
  outline: none;
}
.leiyao_header .leiyao_search-from > button {
  width: 80px;
  height: 40px;
  background-color: #f83244;
  color: #fff;
  border: 0;
  border-radius: 0px 4px 4px 0px;
  float: left;
  outline: none;
  font-size: 18px;
  cursor: pointer;
}

/* tel */
.leiyao_header .leiyao_search > .tel {
  width: 346px;
  float: left;
  padding-top: 30px;
  text-align: right;
}
.leiyao_header .leiyao_search > .tel > p {
  font-size: 14px;
  color: #333;
}
.leiyao_header .leiyao_search > .tel > h3 {
  color: #f83244;
}

</style>